<template>
  <div class="aboutBody">
    <el-col :span="4">
      <h5>帮助中心</h5>
      <el-menu
        :default-active="$route.path"
        @select="handleSelect"
        class="el-menu-vertical-demo"
      >
          <el-menu-item index="/about/about">
            <i class="el-icon-menu"></i>
            <span slot="title">关于我们</span>
          </el-menu-item>
          <el-menu-item index="/about/baihui">
            <i class="el-icon-menu"></i>
            <span slot="title">百慧卡说明</span>
          </el-menu-item>
          <el-menu-item index="/about/customer">
            <i class="el-icon-document"></i>
            <span slot="title">客户服务</span>
          </el-menu-item>
          <el-menu-item index="/about/contactUs">
            <i class="el-icon-setting"></i>
            <span slot="title">联系我们</span>
          </el-menu-item>
      </el-menu>
    </el-col>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'About',
  data() {
    return {};
  },
  methods: {
    handleSelect(data){
      // 这里的data是el-menu-item上的index值
      // 选择之后触发事件，跳转到对应路由
      this.$router.push({path:data})
    }
  }
}
</script>

<style scoped>
.aboutBody {
  width: 60%;
  margin: 60px auto 0 auto;
  display: flex;
  flex-direction: row;
}
.router-link-active {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
</style>

